<template>
    <div>
        <el-card class="xj-table-list">
            <avue-crud ref="crudUser"
                       :data="data"
                       :option="option"
                       v-model:page="page"
                       v-model:search="search"
                       :table-loading="loading"
                       :cell-style="cellStyle"
                       @on-load="onLoad"
                       @refresh-change="onLoad"
                       @search-change="searchChange">
                <template #menu-left="{size}">
                    <span><!--  防抖动--> </span>
                    <el-button type="primary" :size="size" icon="el-icon-plus" plain @click="addDialogVisible = true">新增</el-button>
                </template>
                <template #disable="{row}">
                    <el-switch v-model="row.disable" @change="updDisable(row)"
                               :active-value=0 :inactive-value=1
                               active-text="" inactive-text="">
                    </el-switch>
                </template>

                <template #headPic="{row}">
                    <el-avatar :src="row.headPic"/>
                </template>

                <template #regTime-search="{disabled,size}">
                    <div class="block">
                        <el-date-picker
                            v-model="search.regTime"
                            type="datetimerange"
                            :shortcuts="defaultdata.timeOptions.shortcuts"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                </template>
                <template #menu="{scope,row,size,index}">
                    <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,1)">编辑</el-button>
                    <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,2)">重置密码</el-button>
                    <el-button type="primary" :size="size" text icon="el-icon-delete" @click="rowDel(row,index)">删除</el-button>
                </template>
            </avue-crud>
            <el-dialog draggable title="新增"
                       v-if="addDialogVisible"
                       v-model="addDialogVisible"
                       :width="dialogWidth"
                       top="6vh"
                       @close="closeDialog">
                <Add @closeDialog="closeDialog" :uri="uri"></Add>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>

            <el-dialog draggable title="编辑"
                       v-if="updDialogVisible"
                       v-model="updDialogVisible"
                       :width="dialogWidth"
                       top="6vh"
                       @close="closeDialog">
                <Upd @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>

            <el-dialog draggable title="重置密码" v-if="updPwdDialogVisible" v-model="updPwdDialogVisible" width="30%" top="6vh">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="输入密码">
                        <el-input v-model="rowPassword.info"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                   <el-button @click="updPwdDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="updPwd()">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>

import {defineAsyncComponent} from 'vue';

export default {
    components: {
        Add: defineAsyncComponent(() => import('./userAdd.vue')),
        Upd: defineAsyncComponent(() => import('./userUpd.vue'))
    },
    data() {
        return {
            uri: {
                infoList: "/api/admin/sys/user/findPage",
                info: "/api/admin/sys/user",
                findDepTree: "/api/admin/sys/dep/tree",
                roleInfo: "/api/admin/sys/role/findPage",
                resetPassword: "/api/admin/sys/user/{id}/resetPassword"
            },
            loading: true,
            dialogWidth: "60%",
            addDialogVisible: false,        // 添加弹层开关状态
            updDialogVisible: false,        // 编辑弹层开关状态
            updPwdDialogVisible: false,     // 重置密码弹层开关状态
            page: this.website.pageParams,  // 分页参数
            data: [],                       // 列表数据
            rowData: {},                    // 当前选中行数据
            option: {},
            // 搜索参数
            search: {},
            // 重置密码数据保存
            rowPassword: {
                info: "123456",
                default: "123456",
            },
            // 部门
            deps: [],
            roles: []
        }
    },
    activated() {
        this.crud.doLayout(this, this.$refs.crudUser)
    },
    async mounted() {
        // 获取部门数据
        let res = await this.crud.get(this.uri.findDepTree, {disable: 0, isTree: true});
        this.deps = res.data.data
        // 获取角色数据
        res = await this.crud.get(this.uri.roleInfo, {size: 10000, disable: 0})
        this.roles = res.data.data.records;
        // 基础配置
        this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
        // 字段配置
        this.option.column = [
            {
                label: '头像',
                prop: 'headPic',
            },
            {
                label: '账号',
                prop: 'username',
                search: true,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '手机号',
                prop: 'phone',
                search: true,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '姓名',
                prop: 'fullName',
                search: true,
                overHidden: true,
                searchSpan: 5,
            },
            // {
            //     label: '年龄',
            //     prop: 'age',
            // },
            // {
            //     label: '性别',
            //     prop: 'gender',
            //     dicData: this.dict.get(this.website.Dict.Base.Gender),
            // },
            {
                label: '角色',
                prop: 'roleIds',
                search: true,
                searchSpan: 5,
                overHidden: true,
                span: 20,
                filterable: true,
                multiple: true,
                type: "checkbox",
                dicData: this.roles,
                props: {
                    value: "id",
                    label: "name",
                },
            },
            {
                label: '部门',
                prop: 'depIds',
                span: 20,
                search: true,
                searchSpan: 5,
                type: "cascader",
                dataType: 'string',
                filterable: true,
                checkStrictly: true,
                overHidden: true,
                dicData: this.deps,   // 自行替换字典数据
                props: {
                    value: "id",
                    label: "name",
                    children: "children"
                },
                labelTip: '用于控制业务走向,通过部门+职位组合可满足大多数场景下的业务控制, 如给指定部门的人推送消息',
            },
            {
                label: '职位',
                prop: 'position',
                type: "switch",
                search: true,
                searchSpan: 5,
                overHidden: true,
                dicData: this.dict.get(this.website.Dict.Admin.Position),
            },
            {
                label: '注册时间',
                prop: 'regTime',
                searchSpan: 10,
                search: true,
                overHidden: true,
            }, {
                label: '最后登录时间',
                prop: 'endTime',
                searchSpan: 10,
                search: false,
                overHidden: true,
            },

            {
                label: '禁用/启用',
                prop: 'disable',
                type: "switch",
                search: true,
                searchSpan: 5,
                dicData: this.dict.get("WHETHER", false),
            },

            {
                label: '是否在线',
                prop: 'isOnline',
                type: "select",
                search: true,
                searchSpan: 5,
                dicData: [
                    {
                        label: "在线",
                        value: true
                    },
                    {
                        label: "不在线",
                        value: false
                    }
                ],
            },
            {
                label: '备注',
                prop: 'remarks',
                searchSpan: 10,
                search: false,
                overHidden: true,
            },
        ]
        // console.debug("获取组织架构-加载字段结束" + JSON.stringify(this.deps))
    },
    watch: {
        // 监听路由参数变化, 让其支持消息点击跳转，并能携带动态参数进行查询
        // 携带将与搜索框搜索参数同步
        $route(to, from) {
            const currentPath = to.path;
            if (currentPath === '/views/admin/user/user' && Object.keys(to.query).length > 0) {
                // 设置url 参数到搜索条件中
                this.setSearchByUrlParams(this, window.location.href);
                // 调用查询
                this.onLoad();
            }
        },
    },
    created() {
        // 设置url 参数到搜索条件中
        this.setSearchByUrlParams(this, window.location.href);
    },
    methods: {
        /**
         * 直接触发：  首次自动加载 / 点击分页 / 切换分页 / 跳转也 / 点击刷新
         * 被调用触发：搜索后 /  添加/编辑保存后 / 删除后
         * @author wangsong
         */
        onLoad() {
            // 查询
            this.crud.list(this, true);
            this.crud.doLayout(this, this.$refs.crudUser);
        },
        // 搜索,并重置页数为1
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad();
            done();
        },
        // 添加/编辑保存数据后 关闭弹层+ true-刷新列表 false-不刷新
        closeDialog(isRefresh) {
            this.addDialogVisible = false;
            this.updDialogVisible = false;
            this.rowData = {};
            if (isRefresh != null && isRefresh) {
                this.onLoad();
            }
        },
        // 行编辑
        updRow(row, type) {
            this.rowData = row;
            switch (type) {
                case 1:
                    // 编辑弹层
                    this.updDialogVisible = true;
                    break;
                case 2:
                    // 修改密码弹层
                    this.updPwdDialogVisible = true;
                    break;
                default:
                    this.$message.error('操作类型错误');
                    break;
            }
        },
        // 行删除
        rowDel(row, index) {
            this.crud.delRow(this, this.uri.info, row.id, index);
        },
        // 启用/禁用
        updDisable(row) {
            if (row.id != null) {
                this.crud.put(this.uri.info + "/" + row.id, {disable: row.disable});
            }
        },
        // 修改密码
        updPwd() {
            this.crud.put(this.uri.resetPassword.replace("{id}", this.rowData.id), null, {password: this.rowPassword.info});
            this.updPwdDialogVisible = false;
            this.rowPassword.info = this.rowPassword.default
        },
        // 自动配置,单元格样式数字，对指定列设置字体颜色,大小，粗细等
        cellStyle({row, column}) {
            if (column.property == "disable") {
                // fontWeight: 'bold',fontSize: '20'
                return row.disable == 0 ? {color: 'green'} : {color: 'red'}
            }
            if (column.property == "isOnline") {
                // fontWeight: 'bold',fontSize: '20'
                return row.isOnline ? {color: '#5fe340'} : {color: ''}
            }
        }
    }
}
</script>